<template>
    <div class="component-gossip-item">
        <div class="header">
            <img class="icon" :src="data.src">
            <span class="name">{{data.name}}</span>
            <span class="date">{{data.date}}</span>
        </div>
        <div class="content">{{data.content}}</div>
        <div class="imgs">
            <img v-for="img in data.imgs" :src="img">
        </div>
    </div>
</template>

<style lang="less" scoped>

    @import '../style/variable';

    .component-gossip-item {
        padding: 0 1.5rem 1.3rem 0;
        margin-left: 1.5rem;
        &:not(:last-child){
            border-bottom: 1px solid @color-line-gray;
        }
        .header {
            line-height: 4rem;
            font-size: 1.3rem;
            color: @color-text-gray;
            & > * {
                vertical-align: middle;
            }
        }
        .icon {
            width: 2rem;
            height: 2rem;
            margin: 1rem 0;
            margin-right: 1rem;
        }
        .date {
            float: right;
        }

        .content {
            font-size: 1.5rem;
            line-height: 2.1rem;
        }

        .imgs{
            margin-top: .8rem;
            font-size: 0;
            img{
                width: 11rem;
                margin-right: .5rem;
            }
            img:nth-child(3n){
                margin: 0;
            }
        }
    }

</style>

<script>
    export default {
        props: ['data']
    }
</script>